<template>
  <MainDetails />
  <BgLine />
  <BackGround>
      <div class="_main">
        <div class="_main_name">—— {{data.type === 1? $t("blind.superBox"):
          data.type === 2? $t("blind.specialBox"): $t("blind.commonBox")}} ——</div>
        <div class="_main_1"><img :src="pics[data.type - 1]" alt=""></div>
        <div class="price">{{data.costCoinNum}}{{data.coinName}}</div>
        <div class="_main_2">
          <div class="_main_2_t">{{data.type === 1? $t("blind.superBoxRate"): data.type === 2?
            $t("blind.specialBoxRate"): $t("blind.commonBoxRate")}}</div>
          <div class="_main_2_util">
            <div>{{$t("blind.buyAmount")}}</div>
            <div>
              <div @click="sub">-</div>
              <div>{{num}}</div>
              <div @click="add">+</div>
            </div>
            <div @click="max">MAX</div>
          </div>
          <div class="tips">{{$t("blind.stock")}}{{data.stock}}</div>
          <button class="union_join" @click="buy">{{$t("blind.buy")}}</button>
          <div class="_main_3"><div>{{data.coinName}}：{{wallet}}</div><router-link to="/InMoney?id=1">{{$t("deposit.title")}}</router-link></div>
        </div>
      </div>
  </BackGround>
</template>

<script>
  import pic1 from '@/assets/BuyBlindBox/1.png';
  import pic2 from '@/assets/BuyBlindBox/2.png';
  import pic3 from '@/assets/BuyBlindBox/3.png';
    import BackGround from '@components/BackGroundBox/index.vue';
    import MainDetails from "@components/MainDetails/index.vue";
    import BgLine from '@components/BgLine/index.vue';
    import http from "../../http";
    export default {
      data() {
        return {
          pics: [pic1, pic2, pic3],
          num: 1,
          data: {},
          wallet: "-"
        }
      },
      methods: {
        getBox: async function () {
          let res = await http.get(`/api/blind-box/get?id=` + this.$route.query.id);
          if (res.code === 200) {
            this.data = res.data;
            let wallet = await http.get(`/api/wallet/get?id=` + res.data.costCoinId);
            if (wallet.code === 200) {
              this.wallet= wallet.data;
            }
          }
        },
        buy: async function () {
          let id = this.$route.query.id;
          let num = this.num;
          let param = "?id=" + id + "&num=" + num;
          let res = await http.post(`/api/blind-box/purchase` + param);
          if (res.code === 200) {
            Toast(this.$t("operationSuccess"));
              this.$router.replace("/MyPackageCard?tab=1")
          }
        },
        sub: function(){
          if(this.num <= 1) return;
          this.num --;
        },
        add: function(){
          if(this.num >= this.data.stock) return;
          this.num ++;
        },
        max: function(){
          this.num = this.data.stock;
        }
      },
      mounted() {
        this.getBox();
      },
      components: {
        BackGround,
        MainDetails,
        BgLine,
      }
    }

</script>

<style scoped lang="scss">
  ._main  {
    padding: 18px 15px;
  }
  ._main_name {
    font-size: 18px;
    @include fontTCMedium;
    font-weight: 500;
    color: $color3;
    line-height: 25px;
  }
  .price{
    margin-top:10px;
    color: #DEA05C;
    font-size: 18px;
  }
  ._main_1 {
    margin: 20px auto 0;
    width: 73px;
    height: 115px;
    img {
      width: 100%;
      height: auto;
    }
  }
  ._main_2 {
    width: 100%;
    background: #000000;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.51);
    margin-top: 20px;
    padding: 15px;
  }
  ._main_2_t {
    font-size: 15px;
    @include fontTCMedium;
    color: $color3;
    text-align: left;
    padding-left: 38px;
    &:nth-child(2) {
      margin-top: 11px;
    }
  }
  ._main_2_util {
    @include flex;
    padding: 20px 12px;
    >div {
      &:nth-child(1) {
        color: $color1;
        font-size: 13px;
        @include fontTCMedium;
      }
      &:nth-child(2) {
        @include flex;
        >div {
          height: 30px;
          &:nth-child(1) {
            width: 30px;
            background: $color;
            color: #000;
            font-size: 18px;
            line-height: 33px;
            font-weight: bold;
          }
          &:nth-child(2) {
            width: 80px;
            border: 1px solid $color;
            color: $color3;
            font-size: 17px;
            @include fontTCMedium;
            line-height: 30px;
          }
          &:nth-child(3) {
            width: 30px;
            background: $color;
            color: #000;
            font-size: 28px;
            line-height: 33px;
            /*font-weight: bold;*/
          }
        }
      }
      &:nth-child(3) {
        width: 60px;
        height: 30px;
        background: $color;
        border-radius: 3px;
        font-size: 14px;
        @include fontTCMedium;
        /*font-weight: 500;*/
        color: #FFFFFF;
        line-height: 30px;
      }
    }
  }
  .union_join {
    width: 100%;
    height: 44px;
    background: $color;
    border-radius: 5px;
    font-size: 17px;
    @include fontSCRegular;
    font-weight: 400;
    color: #0B0B09;
    line-height: 44px;
    margin-top: 10px;
  }
  ._main_3 {
    font-size: 13px;
    @include fontSCRegular;
    color: $color3;
    margin-top: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    a{
        margin-left: 20px;
        text-decoration: underline;
        color: #fff;
    }
  }
  .tips {
    color: $color3;
    font-size: 12px;
    text-align: center;
    padding: 0 0 10px 0;
  }
</style>
